/*----------------------------------------------------------------
// 文件功能描述：通用混合器、模块样式
// 时间：2021/01/07
// 修改标识：
// 修改描述：
//----------------------------------------------------------------*/

//宽高
@mixin elementSize($w,$h){
	width: $w;
	height: $h;
}
//旋转
@mixin transformRotate($angle,$x,$y){
	transform: rotate($angle);
	-ms-transform: rotate($angle);		/* IE 9 */
	-webkit-transform: rotate($angle);	/* Safari and Chrome */
	-o-transform: rotate($angle);		/* Opera */
	-moz-transform: rotate($angle);		/* Firefox */
	transform-origin:$x $y;             //旋转中心
	-ms-transform-origin:$x $y;
	-webkit-transform-origin:$x $y;
	-o-transform-origin:$x $y;
	-moz-transform-origin:$x $y;
}
//flex布局,方向
@mixin flexBox($dire){
	display: box;
	display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
	display:-moz-box;     /* Firefox 19 */
	display:-ms-flexbox;
	display:-webkit-flex; /* Chrome */
	display: flex;
	-webkit-flex-direction: $dire;
	flex-direction: $dire;
	-moz-flex-direction: $dire;
	-ms-flex-direction: $dire;
	-o-flex-direction: $dire;
}
// 居中
@mixin center($p,$t,$l,$x,$y){
	position: $p;
	top: $t;
	left: $l;
	transform: translate($x,$y);
	-ms-transform: translate($x,$y);		/* IE 9 */
	-webkit-transform: translate($x,$y);	/* Safari and Chrome */
	-o-transform: translate($x,$y);	/* Opera */
	-moz-transform: translate($x,$y);	/* Firefox */
}
//单行省略号
@mixin line-ellipsis(){
	white-space:nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
//单行省略号
@mixin multiline-ellipsis($x){
	display: -webkit-box;
	text-overflow:ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $x;
	overflow: hidden;

}

// 公用背景
html,
body,
#app
{
	@include elementSize(100%,100%);
	-webkit-overflow-scrolling: touch;
	position: relative;
}
body{
	font-size: 24px;
	color: #000;
	position: relative;
	background: #fff;
	overflow-x:hidden ;
}
// 公用遮罩
.mask{
	@include elementSize(100%,100%);
	background: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000 !important;
}
// .mask-enter-active{
// 	animation-name:zoomIn;
// 	animation-duration:2s;
// }
// .mask-leave-active{
// 	animation-name:fadeOut;
// 	animation-duration:2s;
// }
// .isScroll{
//     overflow: auto;
//     &::-webkit-scrollbar{
//         width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
//         height: 1px;
//     }
//     &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
//         border-radius: 6px;
//         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//         background: #666;
//     }
//     &::-webkit-scrollbar-track {/*滚动条里面轨道*/
//         -webkit-box-shadow: inset 0 0 5px rgba(59, 100, 168,0.1);
//         border-radius: 6px;
//         background: #eee;
//     }
// }
.page-switch-enter-active{
	animation-name:fadeInRight;
	animation-duration:.2s;
}

//水平垂直居中
.center{
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.boxStyle{
	background: #FFFFFF;
	box-shadow: 0px 10px 27px 3px rgba(2, 175, 254, 0.06);
	border-radius: 40px;
}
.label{
	width: 130px;
	height: 48px;
	line-height: 48px;
	background: #02AFFE;
	border-radius: 40px 24px 24px 0px;
    // padding: 0.1rem 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 22px;
    text-align: center;
}
.pointer{
	cursor: pointer;
}
.ellipsisTwo{
	-webkit-line-clamp:2;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}
.ellipsis{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
.bold{
	font-weight: bold;
}
.mar20{
					margin-left: 20px;
	}
.absolute{
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}

input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
}
input:-webkit-autofill { box-shadow: 0 0 0px 1000px #F3F5F7 inset !important;}

.shadow1{
   box-shadow: 0px 10px 20px 0px rgba(2, 175, 254, 0.25);
	-webkit-box-shadow: 0 10px 20px 0px rgba(2,175,254,0.25);
}
.shadow2{
	box-shadow: 0px 0px 40px 0px rgba(59, 100, 168, 0.15);
	-webkit-box-shadow: 0px 0px 40px 0px rgba(59, 100, 168, 0.15);
}
.shadow3{
  box-shadow: 0px 10px 50px 0px rgba(59, 100, 168, 0.3);
	-webkit-box-shadow:0px 10px 50px 0px rgba(59, 100, 168, 0.3);
}


//自定义滚动条
// .scrollStyle{
// 	  scrollbar-color:  rgba(0, 0, 0, .1) #F4f4f4;  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
// 		scrollbar-width: thin;  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
// }
.scrollStyle::-webkit-scrollbar {
    width: 6px;
		height: 1px;
		display: none;
}
.scrollStyle::-webkit-scrollbar-thumb {
		border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.6);
    background-color: rgba(0, 0, 0, .1);

			display: none;
}

.scrollStyle::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
    border-radius: 10px;
		background: #F4f4f4;
			display: none;
}

.bom30{
	margin-bottom: 30px;
}
.bom20{
	margin-bottom: 20px;
}
.bom10{
	margin-bottom: 10px;
}
